<template>
	<b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #000;"
                controls
                indicators
                background="#ababab"
                :interval="4000"
                img-width="1024"
                img-height="350"
                v-model="slide"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd"
    >
      <b-carousel-slide img-src="http://120.27.116.92:9090/tpl/simplebootx/Public/images/demo/slider-1.jpg">
      </b-carousel-slide>
      <b-carousel-slide img-src="http://120.27.116.92:9090/tpl/simplebootx/Public/images/demo/slider-2.jpg">
      </b-carousel-slide>
      </b-carousel>
</template>

<script>
	export default {
    data () {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart (slide) {
        this.sliding = true
      },
      onSlideEnd (slide) {
        this.sliding = false
      }

    }
  }
</script>